import React, { useState, useEffect ,createContext} from 'react';
import { Card, Steps, Col,Alert } from 'antd';
import { connect } from 'umi';
import { StateType } from './model';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';
import styles from './style.less';

const { Step } = Steps;

interface InitiateSubscribeProps {
  current: StateType['current'];
  dispatch: Function;
}
interface IWarning {
  remind:boolean,
  num?: number,
}
const getCurrentStepAndComponent = (current?: string) => {
  switch (current) {
    case 'confirm':
      return { step: 1, component: <Step2 /> };
    case 'result':
      return { step: 2, component: <Step3 /> };
    case 'info':
    default:
      return { step: 0, component: <Step1 /> };
  }
};
export  const WarningContext = createContext({});
const InitiateSubscribe: React.FC<InitiateSubscribeProps> = ({ current, dispatch }) => {
  const [stepComponent, setStepComponent] = useState<React.ReactNode>(<Step1 />);
  const [currentStep, setCurrentStep] = useState<number>(0);
  const [warning,setWarning] = useState<IWarning>({})
  useEffect(() => {
    const { step, component } = getCurrentStepAndComponent(current);
    setCurrentStep(step);
    setStepComponent(component);
  }, [current]);
  useEffect(() => {
    setCurrentStep(0);
    setStepComponent(<Step1 />);
    dispatch({
      type: 'initiateSubscribe/saveCurrentStep',
      payload: 'info',
    });
  }, [])
  return (
    <div>
      {warning.remind?( <Alert className={styles.warning} message={`访客人数大于${warning.num}人，需要上传图片！`} type="warning" showIcon closable />):''}
      <Col lg={24} md={12} sm={24}>
        <Card bordered={false} className={styles.navigation}>
          <>
           <WarningContext.Provider value={{setWarning}}>
            <div className={styles.visitorInformation}>
              <Steps current={currentStep} className={styles.steps}>
                <Step title="发起预约" />
               
                <Step title="同行人员" />
               
                <Step title="完成" />
              </Steps>
              {stepComponent}
            </div>
             </WarningContext.Provider>
          </>
        </Card>
      </Col>
    </div>
  );
};

export default connect(({ initiateSubscribe }: { initiateSubscribe: StateType }) => ({
  current: initiateSubscribe.current,
}))(InitiateSubscribe);
